import * as THREE from "three";
import { CSS3DObject,CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import axios from "axios";
export const ThreeExp = {
	methods:{
		async threeExp(){
			this.loading = true ;
			this.$parent.btnIsDis = true;

			this.getMapData("coldWarMap");
			await this.loadCountryNumber(3);

			// 更换画框贴图
			var picArr = [
				{imgUrl:"img/relatedPhoto/three/Spain1.jpg",imgDesc:"周四（2018 年 1 月 25 日）访问西班牙时，北约秘书长延斯·斯托尔滕贝格会见了国防部长玛丽亚·多洛雷斯·德·科斯佩达尔，并赞扬了该国对北约的重要贡献。"},
				{imgUrl:"img/relatedPhoto/three/Spain2.jpg",imgDesc:"2018年1月25日与北约秘书长延斯·斯托尔滕贝格和西班牙国防部长玛丽亚·多洛雷斯·德·科斯佩达尔·加西亚举行联合新闻发布会"},
				{imgUrl:"img/relatedPhoto/three/Spain3.jpg",imgDesc:"北约秘书长延斯·峡滕贝格会见西班牙部队"}
			]
			this.changePicTexture(picArr);
			
			var newCameraPos, newTargetPos;
			var fontAnimation,flagAnimation,arrowAnimation,doubtAnimation;
			var Group = new THREE.Group();
			var resource = new THREE.Object3D();
			Group.name = "Jb";
			this.scene.add(Group)
			newCameraPos = {
				x:10.692489707135236,
				y:51.23218231065356,
				z:140.33718033845176
			}
			newTargetPos = {
				x:0,
				y:0,
				z:0
			}
			
			
			
			////////////////////////////////////加载模型资源///////////////////////////////////////////////
			let spainLabel = this.get3dLabel("西班牙",false)
			let spainFlagModel = this.gltfLoadModel("model/public/flaggltf/scene.gltf");
			var spainFlagTexture = this.changeTexture("img/flag/Spain.png")
			await spainFlagModel.then((res) => {
				res.scene.scale.set(4, 4, 4);
				var flag = res.scene.clone();
				flag.children[0].children[1].material.map = spainFlagTexture;
				flag.children[0].children[1].material.map.needsUpdate = true;
				flag.position.set(0,9,-5);
				flag.name = "Spain"
				flagAnimation = res.animations[0]
				flag.add(spainLabel)
				resource.add(flag)
			})

			// 加载四个箭头资源
			var rightArrow = this.gltfLoadModel("model/public/rightarrow/scene.gltf");
			await rightArrow.then((res) => {
				console.log(res)
				arrowAnimation = res.animations[0];
				res.scene.scale.set(5, 5, 5);
				let leftTop 	= res.scene.clone();
				let leftBottom  = res.scene.clone();
				let rightTop 	= res.scene.clone();
				let rightBottom = res.scene.clone();

				leftTop.rotateY(Math.PI * 0.25) ;
				leftTop.name = "leftTop"
				resource.add(leftTop) ;

				rightTop.rotateY(-(Math.PI * 0.25)) ;
				rightTop.name = "rightTop" ;
				resource.add(rightTop) ;

				leftBottom.rotateY(-(Math.PI * 1.3)) ;
				leftBottom.name = "leftBottom"
				resource.add(leftBottom) ;

				rightBottom.rotateY(Math.PI * 1.3) ;
				rightBottom.name = "rightBottom"
				resource.add(rightBottom) ;
			})
			
			let doubtLabel = this.get3dLabel("马格里布地区",false,"30px",5)
			let doubtFlagModel = this.gltfLoadModel("model/public/doubt/scene.gltf");
			await doubtFlagModel.then((res) => {
				res.scene.scale.set(5, 5, 5);
				var doubt = res.scene.clone();
				doubt.position.set(0,9,-5);
				doubt.name = "doubt"
				doubtAnimation = res.animations[0]
				doubt.add(doubtLabel)
				resource.add(doubt)
			})
			
			
			let fontModel = this.gltfLoadModel("model/date/3-19820530/scene.gltf");
			await fontModel.then((res) => {
				res.scene.scale.set(10,10,10);
				var font = res.scene.clone();
				font.name 	  = "19820530"
				fontAnimation = res.animations[0]
				resource.add(font)
			})
			
			this.loading = false
			
			/////////////////////////////////动画///////////////////////////////////////////////////////////////
			this.thirdPromptText();
			this.$refs.Lines.src = "music/lines/treeexp/3-1.mp3" ;
			this.$refs.Lines.play();
			this.animateCamera(this.camera.position, this.controls.target, newCameraPos, newTargetPos, 3000)
			
			setTimeout(()=>{
				let flag = resource.getObjectByName("19820530")
				flag.position.set(0,30,-10)
				Group.add(flag)
				this.onceActionPlay(fontAnimation,flag)
			},1000)
			// 国旗
			setTimeout(()=>{
				let flag = resource.getObjectByName("Spain")
				Group.add(flag)
				this.onceActionPlay(flagAnimation,flag)
			},1500)
			
			
			
			// 关注地区
			setTimeout(()=>{
				var initData = ["Morocco", "Algeria", "Tunisia", "Libya", "Mauritania","W. Sahara"]
				initData.forEach((cName) => {
					this.map.children.forEach((item) => {
						if (item.properties.name == cName) {
							item.children.forEach((area) => {
								if (area.type == "Mesh") {
									area.material.color.set('#aaaa00')
								}
							})
						}
					})
				})
			},8000)

			setTimeout(()=>{
				let newCamerPos ={
					x:-72.22121087488942,
					y:108.24421520040205,
					z:113.74598681974453
				}

				let newTargetPos = {
					x:7.516824949905015,
					y:4.0000000000000115,
					z:13.629354392710868
				}
				this.animateCamera(this.camera.position, this.controls.target, newCamerPos, newTargetPos, 3000)

				let arrowLeftTop = resource.getObjectByName("leftTop")
				arrowLeftTop.position.set(-20,10,-5);
				Group.add(arrowLeftTop)
				this.onceActionPlay(arrowAnimation,arrowLeftTop);

				let arrowRightTop = resource.getObjectByName("rightTop")
				arrowRightTop.position.set(20,10,-5);
				Group.add(arrowRightTop)
				this.onceActionPlay(arrowAnimation,arrowRightTop);
			},9000)

			setTimeout(()=>{
				let arrowleftBottom = resource.getObjectByName("leftBottom")
				arrowleftBottom.position.set(-30,10,35);
				Group.add(arrowleftBottom)
				this.onceActionPlay(arrowAnimation,arrowleftBottom);

				let arrowrightBottom = resource.getObjectByName("rightBottom")
				arrowrightBottom.position.set(20,10,35);
				Group.add(arrowrightBottom)
				this.onceActionPlay(arrowAnimation,arrowrightBottom);
			},10000)
			
			
			setTimeout(()=>{
				let doubt = resource.getObjectByName("doubt")
				doubt.position.set(3,9,25);
				Group.add(doubt)
				let action = this.animationMixer.clipAction(doubtAnimation,doubt);
				action.play()
			},13000)
			
			setTimeout(()=>{
				let newCamerPos ={
					x:3.409710997837048,
					y:145.8270009404325,
					z:233.78122301386333
				}
				
				let newTargetPos = {
					x:0,
					y:9,
					z:0
				}
				this.animateCamera(this.camera.position, this.controls.target, newCamerPos, newTargetPos, 3000)
			},16000)
		}
	}
}